<template>
    <!-- 
		软件定制开发:Q949330222
		9年全栈经验
	 -->
    <view style="overflow-x: hidden">
        <!-- #ifdef MP-WEIXIN -->
        <view :style="'height: calc( ' + getMobileInfo.height + 'px + ' + getMobileInfo.top + 'px);'"></view>
        <!-- #endif -->
        <!-- #ifdef APP-PLUS -->
        <view :style="'height: calc( ' + getSystemInfo.safeArea.top + 'px + 44px);'"></view>
        <!-- #endif -->
        <image class="bg" :src="'https://source.unsplash.com/random/?sky,night'" mode="scaleToFill"></image>

        <scroll-view v-if="isShow_cityScroll" scroll-y="true" class="scroll">
            <view class="scrollItem" v-for="(item, index) in cityScrollList" :key="index" @click="citySelect(index)">
                {{ item.adm1 + ' - ' + item.adm2 + ' - ' + item.name }}
            </view>
        </scroll-view>
        <view class="center">
            <view class="line"></view>
        </view>
        <view class="center addressDiv">
            <view class="address" @click="open">
                <view>{{ city }}</view>
                <fa-icon type="rotate-right" size="22" color="#fff" style="margin-left: 10px"></fa-icon>
            </view>
            <view class="updateTime">{{ formatTime(qweather.data.real.publish_time) }} 更新</view>
        </view>
        <view class="center talk_day">{{ talk_day }}</view>
        <view class="center wenduDiv">
            <view class="wendu">
                <view class="wendu-test">{{ qweather.temperature }}</view>
                <view class="wendu-icon">℃</view>
            </view>
            <view class="cond_txt">
                <image :src="geticon(qweather.info)" style="width: 50px; height: 50px" mode=""></image>
                {{ qweather.info }}
            </view>
            <view style="display: flex; justify-content: space-between; color: #ffffff; font-size: 24px;">
                <view style="font-size: 12px;text-align: center;">
                    <view>
                        <image src="https://zt-1304966785.cos.ap-nanjing.myqcloud.com/sunrise.svg"
                            style="width: 50rpx; height: 50rpx; vertical-align: bottom" mode=""></image>
                        <view>日出</view>
                    </view>
                    <view style="font-size: 18px; margin-left: 5px"><br>{{ qweather.sunrise }}</view>
                </view>
                <view style="font-size: 12px; text-align: center;">
                    <view>
                        <image src="https://zt-1304966785.cos.ap-nanjing.myqcloud.com/sunrise.svg"
                            style="width: 50rpx; height: 50rpx; vertical-align: bottom" mode=""></image>
                        <view>日落</view>
                    </view>
                    <view style="font-size: 18px; margin-left: 5px;"><br>{{ qweather.sunset }}</view>
                </view>
            </view>
        </view>
        <view class="nowinfo">
            <view class="nowinfo-cell">
                <view class="test-desc">
                    体感(℃)
                </view>
                <view class="test-val text-xl">
                    <image src="https://zt-1304966785.cos.ap-nanjing.myqcloud.com/thermometer-colder.svg"
                        style="width: 50rpx; height: 50rpx; vertical-align: bottom" mode=""></image>{{ qweather.feelst }}
                </view>
            </view>
            <view class="lineCol"></view>
            <view class="nowinfo-cell">
                <view class="test-desc">温度(℃)</view>
                <view class="test-val text-xl">
                    <image src="https://zt-1304966785.cos.ap-nanjing.myqcloud.com/thermometer.svg"
                        style="width: 50rpx; height: 50rpx; vertical-align: bottom" mode=""></image>{{ qweather.temperature
                        }}
                </view>
            </view>
            <view class="lineCol"></view>
            <view class="nowinfo-cell">
                <view class="test-desc">风向</view>
                <view class="test-val text-xl">
                    <image src="https://zt-1304966785.cos.ap-nanjing.myqcloud.com/windsock.svg"
                        style="width: 50rpx; height: 50rpx; vertical-align: bottom" mode=""></image>{{ qweather.direct }}
                </view>
            </view>
            <view class="lineCol"></view>
            <view class="nowinfo-cell">
                <view class="test-desc">风力(级)</view>
                <view class="test-val text-xl">
                    <image src="https://zt-1304966785.cos.ap-nanjing.myqcloud.com/wind-alert.svg"
                        style="width: 50rpx; height: 50rpx; vertical-align: bottom" mode=""></image>{{
                            qweather.power }}
                </view>
            </view>
        </view>
        <view class="line"></view>
        <view class="nowinfoDiv">
            <view class="nowinfo">
                <view class="nowinfo-cell">
                    <view class="test-desc">温差(℃)</view>
                    <view class="test-val">
                        <image src="https://zt-1304966785.cos.ap-nanjing.myqcloud.com/thermometer-snow.svg"
                            style="width: 50rpx; height: 50rpx; vertical-align: bottom" mode=""></image>{{
                                qweather.data.real.weather.temperatureDiff }}
                    </view>
                </view>
                <view class="lineCol"></view>
                <view class="nowinfo-cell">
                    <view class="test-desc">降水(mm)</view>
                    <view class="test-val">
                        <image src="https://zt-1304966785.cos.ap-nanjing.myqcloud.com/rain.svg"
                            style="width: 50rpx; height: 50rpx; vertical-align: bottom" mode=""></image>{{
                                qweather.data.real.weather.rain }}
                    </view>
                </view>
                <view class="lineCol"></view>
                <view class="nowinfo-cell">
                    <view class="test-desc">气压(Mpa)</view>
                    <view class="test-val">
                        <image src="https://zt-1304966785.cos.ap-nanjing.myqcloud.com/tornado.svg"
                            style="width: 50rpx; height: 50rpx; vertical-align: bottom" mode=""></image>{{
                                qweather.data.real.weather.airpressure }}
                    </view>
                </view>
                <view class="lineCol"></view>
                <view class="nowinfo-cell">
                    <view class="test-desc">湿度(%)</view>
                    <view class="test-val">
                        <image src="https://zt-1304966785.cos.ap-nanjing.myqcloud.com/humidity.svg"
                            style="width: 50rpx; height: 50rpx; vertical-align: bottom" mode=""></image>{{
                                qweather.data.real.weather.humidity }}
                    </view>
                </view>
            </view>
        </view>

        <view class="maxTitle">未来天气</view>
        <view class="line"></view>
        <view class="day7">


            <swiper :indicator-dots="true" class="swiper" displayMultipleItems="3" v-if="qweather.wl"
                style="width: 100%;height: 280rpx;">
                <swiper-item v-for="day in qweather.wl" :key="day">
                    <template>
                        <view class=""
                            style="border:1rpx #fff solid;border-radius: 15rpx;margin: 5rpx;text-align: center;padding: 10rpx;">
                            <view class="m-2" style="background-color: rgba(0,0,0,0.6);">{{ convertDateFormat(day.time) }}
                            </view>
                            <view class="m-2" style="margin-top: 20rpx;">{{ day.min_temp }}~{{ day.max_temp }}℃</view>
                            <!-- <view class="">
                        {{ day.textDay }}
                        <image
                            v-bind:src="'https://ztapp-1304966785.cos.ap-nanjing.myqcloud.com/icon/' + day.iconDay + '.png'">
                        </image>
                    </view> -->
                            <image :src="geticon(day.day_text)" style="width: 50px; height: 50px" mode=""></image>
                            <view class="">
                                {{
                                    day.day_text }}
                            </view>
                        </view>
                    </template>
                </swiper-item>
            </swiper>
        </view>

        <view class="maxTitle">生活指数</view>
        <view class="line"></view>
        <view class="lifeRowDiv" v-if="zs">
            <view class="lifeRow">
                <view class="imgDiv">
                    <image src="https://ztapp-1304966785.cos.ap-nanjing.myqcloud.com/img/yundong.png" mode=""></image>
                </view>
                <view class="info">
                    <view class="lifeTitle">运动 {{ zs[0].category }}-{{ zs[0].level }}</view>
                    <view class="lifeDesc">{{ zs[0].text }}</view>
                </view>
            </view>
            <view class="lifeRow">
                <view class="imgDiv">
                    <image src="https://ztapp-1304966785.cos.ap-nanjing.myqcloud.com/img/xiche.png" mode=""></image>
                </view>
                <view class="info">
                    <view class="lifeTitle">洗车 {{ zs[1].category }}-{{ zs[1].level }}</view>
                    <view class="lifeDesc">{{ zs[1].text }}</view>
                </view>
            </view>

            <view class="lifeRow">
                <view class="imgDiv">
                    <image src="https://ztapp-1304966785.cos.ap-nanjing.myqcloud.com/img/chuanyi.png" mode=""></image>
                </view>
                <view class="info">
                    <view class="lifeTitle">穿衣 {{ zs[2].category }}-{{ zs[2].level }}</view>
                    <view class="lifeDesc">{{ zs[2].text }}</view>
                </view>
            </view>

            <view class="lifeRow">
                <view class="imgDiv">
                    <image src="https://ztapp-1304966785.cos.ap-nanjing.myqcloud.com/img/钓鱼.png" mode=""></image>
                </view>
                <view class="info">
                    <view class="lifeTitle">钓鱼 {{ zs[3].category }}-{{ zs[3].level }}</view>
                    <view class="lifeDesc">{{ zs[3].text }}</view>
                </view>
            </view>
            <view class="lifeRow">
                <view class="imgDiv">
                    <image src="https://ztapp-1304966785.cos.ap-nanjing.myqcloud.com/img/ziwaixian.png" mode=""></image>
                </view>
                <view class="info">
                    <view class="lifeTitle">紫外线 {{ zs[4].category }}-{{ zs[4].level }}</view>
                    <view class="lifeDesc">{{ zs[4].text }}</view>
                </view>
            </view>
            <view class="lifeRow">
                <view class="imgDiv">
                    <image src="https://ztapp-1304966785.cos.ap-nanjing.myqcloud.com/img/旅游.png" mode=""></image>
                </view>
                <view class="info">
                    <view class="lifeTitle">旅游 {{ zs[5].category }}-{{ zs[5].level }}</view>
                    <view class="lifeDesc">{{ zs[5].text }}</view>
                </view>
            </view>
            <view class="lifeRow">
                <view class="imgDiv">
                    <image src="https://ztapp-1304966785.cos.ap-nanjing.myqcloud.com/img/撒花粉.png" mode=""></image>
                </view>
                <view class="info">
                    <view class="lifeTitle">花粉过敏 {{ zs[6].category }}-{{ zs[6].level }}</view>
                    <view class="lifeDesc">{{ zs[6].text }}</view>
                </view>
            </view>
            <view class="lifeRow lifeRow1">
                <view class="imgDiv">
                    <image src="https://ztapp-1304966785.cos.ap-nanjing.myqcloud.com/img/shushidu.png" mode=""></image>
                </view>
                <view class="info">
                    <view class="lifeTitle">舒适度 {{ zs[7].category }}-{{ zs[7].level }}</view>
                    <view class="lifeDesc">{{ zs[7].text }}</view>
                </view>
            </view>

            <view class="lifeRow">
                <view class="imgDiv">
                    <image src="https://ztapp-1304966785.cos.ap-nanjing.myqcloud.com/img/ganmao.png" mode=""></image>
                </view>
                <view class="info">
                    <view class="lifeTitle">感冒 {{ zs[8].category }}-{{ zs[8].level }}</view>
                    <view class="lifeDesc">{{ zs[8].text }}</view>
                </view>
            </view>
            <view class="lifeRow">
                <view class="imgDiv">
                    <image src="https://ztapp-1304966785.cos.ap-nanjing.myqcloud.com/img/kongqizhiliang.png" mode="">
                    </image>
                </view>
                <view class="info">
                    <view class="lifeTitle">空气污染 {{ zs[9].category }}-{{ zs[9].level }}</view>
                    <view class="lifeDesc">{{ zs[9].text }}</view>
                </view>
            </view>
            <view class="lifeRow">
                <view class="imgDiv">
                    <image src="https://ztapp-1304966785.cos.ap-nanjing.myqcloud.com/img/空调.png" mode="">
                    </image>
                </view>
                <view class="info">
                    <view class="lifeTitle">空调 {{ zs[10].category }}-{{ zs[10].level }}</view>
                    <view class="lifeDesc">{{ zs[10].text }}</view>
                </view>
            </view>
            <view class="lifeRow">
                <view class="imgDiv">
                    <image src="https://ztapp-1304966785.cos.ap-nanjing.myqcloud.com/img/glasses.png" mode="">
                    </image>
                </view>
                <view class="info">
                    <view class="lifeTitle">太阳镜 {{ zs[11].category }}-{{ zs[11].level }}</view>
                    <view class="lifeDesc">{{ zs[11].text }}</view>
                </view>
            </view>
            <view class="lifeRow">
                <view class="imgDiv">
                    <image src="https://ztapp-1304966785.cos.ap-nanjing.myqcloud.com/img/化妆盒.png" mode="">
                    </image>
                </view>
                <view class="info">
                    <view class="lifeTitle">化妆 {{ zs[12].category }}-{{ zs[12].level }}</view>
                    <view class="lifeDesc">{{ zs[12].text }}</view>
                </view>
            </view>
            <view class="lifeRow">
                <view class="imgDiv">
                    <image src="https://ztapp-1304966785.cos.ap-nanjing.myqcloud.com/img/taiyang.png" mode=""></image>
                </view>
                <view class="info">
                    <view class="lifeTitle">晾晒 {{ zs[13].category }}-{{ zs[13].level }}</view>
                    <view class="lifeDesc">{{ zs[13].text }}</view>
                </view>
            </view>
            <view class="lifeRow">
                <view class="imgDiv">
                    <image src="https://ztapp-1304966785.cos.ap-nanjing.myqcloud.com/img/交通.png" mode=""></image>
                </view>
                <view class="info">
                    <view class="lifeTitle">交通 {{ zs[14].category }}-{{ zs[14].level }}</view>
                    <view class="lifeDesc">{{ zs[14].text }}</view>
                </view>
            </view>
            <view class="lifeRow">
                <view class="imgDiv">
                    <image src="https://ztapp-1304966785.cos.ap-nanjing.myqcloud.com/img/防晒.png" mode=""></image>
                </view>
                <view class="info">
                    <view class="lifeTitle">防晒 {{ zs[15].category }}-{{ zs[15].level }}</view>
                    <view class="lifeDesc">{{ zs[15].text }}</view>
                </view>
            </view>
            <view style="margin: 0px 10px; position: relative">
                <view class="lifeRowLine"></view>
            </view>

        </view>

        <view style="height: 20px; width: 100%"></view>
        <cityPicker :column="column" :default-value="defaultValue" :mask-close-able="maskCloseAble" @confirm="confirm2"
            @cancel="cancel2" :visible="visible" />
    </view>
</template>

<script>
const SunCalc = require('suncalc');
import cityPicker from '@/uni_modules/piaoyi-cityPicker/components/piaoyi-cityPicker/piaoyi-cityPicker'
import faIcon from '@/components/kilvn-fa-icon/fa-icon.vue';

export default {
    components: {
        faIcon,
        cityPicker
    },
    data() {
        return {
            getSystemInfo: {},
            getMobileInfo: {},
            visible: false,
            bg: 1,
            title: 'Hello',
            weather_now: {},
            lifestyle: [],
            city: '沈阳市',
            weather_day: {},
            talk_day: 'LQ-concentration:待装配',
            location: {
                city: "沈阳市",
                city_code: "",
                district: "浑南区",
                district_code: "",
                latitude: 41.73352837456597,
                longitude: 123.44750895182291,
            },
            address: '',
            weather_icon: '',
            isShow_cityScroll: false,
            cityScrollList: [],
            qweather: {},
            zs: [],
            defaultValue: ['河北省', '唐山市', '丰南区'],
            column: 2,
            bgurl: ''
        };
    },
    async onShow() {
        this.bg = Math.round(Math.random() * 3) + 1;
        // this.$http.get("https://imgapi.cn/api.php?zd=mobile&fl=meizi&gs=json", {}, {

        // }).then(res => {
        //     console.log('getimgres', res)
        //     this.bgurl = res.data.imgurl;
        // })


    },
    async onLoad() {
        let that = this
        uni.getSystemInfo({
            success: function (res) {
                that.getSystemInfo = res;
            }
        });
        this.getLocation();
        console.log('this.city', this.city)
        console.log('this.defaultValue', this.defaultValue)
    },
    methods: {
        getLocation() {
            uni.getLocation({
                type: 'wgs84',
                success: (res) => {
                    this.location = res;
                    console.log('当前位置的经度：' + res.longitude);
                    console.log('当前位置的纬度：' + res.latitude);
                    // 获取到经纬度后，调用解析位置的函数
                    this.getCityName(res.latitude, res.longitude);
                },
                fail: () => {
                    uni.showToast({
                        title: '获取位置失败',
                        icon: 'none'
                    });
                    this.getInfo()
                }
            });
        },
        getCityName(latitude, longitude) {
            // 这里以腾讯地图为例，需要替换为你的腾讯地图API Key
            const apiKey = 'IXBBZ-HHSK3-UWW3K-3DB6K-M7Y5K-F4FM5';
            const url = `https://apis.map.qq.com/ws/geocoder/v1/?location=${latitude},${longitude}&key=${apiKey}`;

            uni.request({
                url: url,
                success: (res) => {
                    console.log('getCityName', res)
                    if (res.data.status === 0) {
                        const city = res.data.result.address_component.city;
                        this.city = city;
                        this.getInfo()
                        console.log('当前城市：' + city);
                        this.defaultValue = [];
                        this.defaultValue.push(res.data.result.address_component.province)
                        this.defaultValue.push(res.data.result.address_component.city)
                        this.defaultValue.push(res.data.result.address_component.district)
                        console.log('this.defaultValue', this.defaultValue)
                        uni.showToast({
                            title: `当前城市: ${city}`,
                            icon: 'none'
                        });
                    } else {
                        uni.showToast({
                            title: '解析城市失败',
                            icon: 'none'
                        });
                    }

                },
                fail: () => {
                    uni.showToast({
                        title: '请求失败',
                        icon: 'none'
                    });
                }
            });
        },
        open() {
            this.visible = true
        },
        confirm2(val) {

            let city = val.cityName;
            if (city == '市辖区') {
                city = val.provinceName;
            }
            console.log(city)
            this.city = city;
            this.getInfo();
            this.visible = false
        },
        cancel2() {
            this.visible = false
        },
        geticon(info) {
            if (info == "晴") {
                return "https://zt-1304966785.cos.ap-nanjing.myqcloud.com/clear-day.svg"
            } else if (info == "多云") {
                return "https://zt-1304966785.cos.ap-nanjing.myqcloud.com/cloudy.svg"
            } else if (info == "阴") {
                return "https://zt-1304966785.cos.ap-nanjing.myqcloud.com/extreme.svg"
            } else if (info.includes("雪")) {
                return "https://zt-1304966785.cos.ap-nanjing.myqcloud.com/snow.svg";
            } else if (info.includes("雨")) {
                return "https://zt-1304966785.cos.ap-nanjing.myqcloud.com/rain.svg";
            }
        },
        convertDateFormat(originalDate) {
            // 将原始日期拆分成年、月、日
            const [year, month, day] = originalDate.split('/');

            // 创建日期对象
            const dateObject = new Date(`${year}-${month}-${day}`);

            // 获取月份和日期，并确保为两位数
            const formattedMonth = (dateObject.getMonth() + 1).toString().padStart(2, '0');
            const formattedDay = dateObject.getDate().toString().padStart(2, '0');

            // 将转换后的日期存储到 convertedDate 变量中
            return `${formattedMonth}-${formattedDay}`;
        },
        formatTime(timestamp) {
            var date = new Date(timestamp); //timestamp 为10位需*1000，timestamp 为13位的话不需乘1000
            var Y = date.getFullYear() + '-';
            var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
            var D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' ';
            var h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
            var m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
            var s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
            return Y + M + D + h + m + s;
        },
        formatTime2(time) {
            const hours = time.getHours().toString().padStart(2, '0');
            const minutes = time.getMinutes().toString().padStart(2, '0');
            return `${hours}:${minutes}`;
        },
        getInfo() {
            uni.showLoading()
            // this.$api2.weather_now(this.location.longitude + ',' + this.location.latitude).then((res) => {
            //     this.weather_now = res.data.data;
            //     this.weather_icon = 'https://ztapp-1304966785.cos.ap-nanjing.myqcloud.com/icon/' + this.weather_now.icon + '.png';
            // });
            // this.$api2.weather_life(this.location.longitude + ',' + this.location.latitude).then((res) => {
            //     this.lifestyle = res.data.data
            // });
            // this.$api2.weather_day(this.location.longitude + ',' + this.location.latitude).then((res) => {
            //     this.weather_day = res.data.data;
            // });
            // this.$api2.weather_talk().then((res) => {
            //     this.talk_day = res.data.data;
            //     uni.hideLoading()
            // });

            this.$http.get("https://zhangteng.cloud:5001/api/Rss/GetWeather?cityName=" + this.city.replace('市', ''), {}, {
                showLoading: true
            }).then(res => {
                const today = new Date();

                // 计算日出和日落时间
                const { sunrise, sunset } = SunCalc.getTimes(today, this.location.latitude, this.location.longitude);

                this.qweather = res.data;

                this.qweather.sunrise = this.formatTime2(sunrise);
                this.qweather.sunset = this.formatTime2(sunset);

                this.qweather.temperature = this.qweather.data.real.weather.temperature;
                this.qweather.feelst = this.qweather.data.real.weather.feelst;
                this.qweather.info = this.qweather.data.real.weather.info;

                this.qweather.direct = this.qweather.data.real.wind.direct;
                this.qweather.speed = this.qweather.data.real.wind.speed;
                this.qweather.power = this.qweather.data.real.wind.power;
                this.qweather.rain = this.qweather.data.real.weather.rain;
                this.qweather.humidity = this.qweather.data.real.weather.humidity;
                this.qweather.predict = this.qweather.data.predict;
                today.setHours(0, 0, 0, 0);
                const filteredData = res.data.data.tempchart.filter(item => {
                    // 解析时间戳
                    const timestamp = new Date(item.time);
                    // 比较日期，只保留晚于今天的数据
                    return timestamp > today;
                });
                this.qweather.wl = filteredData;

                uni.hideLoading()
                console.log('this.qweather2', this.qweather)


            });
            this.$http.get("https://geoapi.qweather.com/v2/city/lookup?location=" + this.city.replace('市', '') + "&key=12ac1c97d8054a058e096d59efe6182e", {}, {
                showLoading: true
            }).then(res => {
                console.log('res[0]', res.data.location[0])
                this.$http.get("https://devapi.qweather.com/v7/indices/1d?type=0&location=" + res.data.location[0].id + "&key=12ac1c97d8054a058e096d59efe6182e", {}, {
                    showLoading: true
                }).then(res => {

                    this.zs = res.data.daily;
                    console.log('this.zs', this.zs)
                });
            });
        },
        cityInput(e) {
            if (this.address) {
                this.isShow_cityScroll = true
                this.$api2.weather_city(this.address).then((res) => {
                    this.cityScrollList = res.data.data
                });
            } else {
                this.isShow_cityScroll = false
            }

        },
        citySelect(index) {
            let info = this.cityScrollList[index]
            this.city = info.name
            this.location.longitude = info.lon
            this.location.latitude = info.lat
            this.isShow_cityScroll = false
            this.address = ''
            this.getInfo()
        }
    }
};
</script>

<style lang="less">
view {
    z-index: 9;
}



.createby {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    height: 30px;
    color: #ffffff;
    background-color: rgba(0, 0, 0, 0.4);
    padding-bottom: 30px;
}

.bg {
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
}

.center {
    width: 85%;
    margin: 0 auto;
    position: relative;
}

.searchDiv {
    position: relative;
    display: flex;
    padding: 5px 0px;
    height: 50px;
    align-items: center;
    color: #ffffff;
    box-sizing: border-box;
    padding-left: 10px;
}

.searchDiv>.input {
    outline: 0;
    padding: 5px;
    padding-left: 15px;
    color: #ffffff;
    font-size: 16px;
    width: 80%;
}

.scroll {
    position: absolute;
    z-index: 999;
    left: 0;
    right: 0;
    top: 200rpx;
    margin: auto;
    width: 650rpx;
    height: 500rpx;
    background: rgba(255, 255, 255, 0.81);
}

.scrollItem {
    color: #333;
    padding: 30rpx 20rpx;
    border-bottom: 2rpx solid #e6e6e6;
}

.line {
    position: relative;
}

.line::after {
    content: '';
    width: 200%;
    height: 1px;
    position: absolute;
    border-bottom: 1px solid rgba(255, 255, 255, 0.25);
    transform: scale(0.5);
    transform-origin: 0 0;
    box-sizing: border-box;
}

.lineCol::after {
    content: '';
    width: 1px;
    height: 200%;
    position: absolute;
    border-left: 1px solid rgba(255, 255, 255, 0.25);
    transform: scale(0.5);
    transform-origin: 0 0;
    box-sizing: border-box;
}

.lineRow::after {
    content: '';
    width: 200%;
    height: 1px;
    position: absolute;
    border-bottom: 1px solid rgba(255, 255, 255, 0.25);
    transform: scale(0.5);
    transform-origin: 0 0;
    box-sizing: border-box;
}

.addressDiv {
    display: flex;
    justify-content: space-between;
    color: #ffffff;
    align-items: center;
    padding: 5px 0px;

    .address {
        font-size: 36px;
        display: flex;
        align-items: center;
    }

    .updateTime {
        font-size: 14px;
    }
}

.talk_day {
    color: #ffffff;
    font-size: 14px;
}

.wenduDiv {
    padding: 50rpx 0px;
}

.wendu {
    color: #ffffff;
    text-align: center;
    display: flex;
    align-items: flex-start;
    justify-content: center;

    .wendu-test {
        font-size: 88px;
    }

    .wendu-icon {
        font-size: 30px;
        display: inline-block;
        padding-top: 15px;
        padding-left: 10px;
    }
}

.cond_txt {
    color: #ffffff;
    margin: auto;
    text-align: center;
    font-size: 24px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.day7 {
    position: relative;
    display: flex;
    justify-content: space-around;
    flex-wrap: nowrap;
    color: #ffffff;
    background-color: rgba(0, 0, 0, 0.4);
    font-size: 13px;
    overflow-x: scroll;
    margin-bottom: 30px;
    width: 100%;

    .oneday {
        view {
            width: 12%;
            padding: 3rpx 0px;
            font-size: 14px;

        }

        image {
            width: 30px;
            height: 30px;
        }
    }
}

.nowinfoDiv {
    width: 100%;
    margin-bottom: 30px;
}

.nowinfo {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-content: space-between;
    color: #ffffff;
    background-color: rgba(0, 0, 0, 0.4);
    font-size: 13px;
}

.nowinfo-cell {
    flex: 1;
    text-align: center;
    padding: 13px 0px;

    .test-desc {
        margin-bottom: 8px;
        display: inline-block;
    }

    .test-val {
        font-size: 1.2rem;
        font-weight: 500;

    }
}

.maxTitle {
    position: relative;
    color: #ffffff;
    background-color: rgba(0, 0, 0, 0.4);
    font-size: 15px;
    text-align: center;
    line-height: 40px;
}

.lifeRowDiv {
    position: relative;
    color: #ffffff;
    background-color: rgba(0, 0, 0, 0.4);
    font-size: 14px;

    .lifeRow {
        padding: 10px 10px 10px 10px;
        display: flex;
        height: 90px;
        box-sizing: border-box;
        position: relative;

        .imgDiv {
            width: 70rpx;
            height: 70rpx;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-shrink: 0;

            image {
                width: 50rpx;
                height: 50rpx;
            }
        }

        .info {
            flex: 1 1 auto;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            padding-left: 20rpx;

            .lifeTitle {
                font-size: 1rem;

                font-weight: 500;
            }

            .lifeDesc {
                font-size: 12px;
                line-height: 21px;
            }
        }
    }

    .lifeRowLine {
        position: relative;
    }

    .lifeRowLine::after {
        content: '';
        width: 200%;
        height: 1px;
        position: absolute;
        bottom: 0;
        left: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.25);
        transform: scale(0.5);
        transform-origin: 0 0;
        box-sizing: border-box;
    }
}
</style>
